<script setup>
import { useNavbarStore } from '../../stores/navbar'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import http_company from '@/api/company.js'
import http_posts from '@/api/posts.js'
import router from '@/router/index.js'
import AMapLoader from '@amap/amap-jsapi-loader'
import http_login from '@/api/login.js'
import { useUserStore } from '@/stores/user.js'
import { ElMessage } from 'element-plus'

const navbarStore = useNavbarStore()
const route = useRoute()
const userStore = useUserStore()

// 函数
// 获得company的info
const getCompanyInfo = async (companyId) => {
  const result = await http_company.getCompanyById(companyId)
  if (result.code === 200) {
    companyInfo.value = result.data
    getCategoryName(companyInfo.value.categoryId)
    getPostsInfo(companyInfo.value.companyId)
    getAuthNumber(companyInfo.value.companyId)
    Longitude.value = +companyInfo.value.position.split(',')[0]
    Latitude.value = +companyInfo.value.position.split(',')[1]
    companyImage.value = JSON.parse(companyInfo.value.companyImage)
    companyInfo.value.welfare = JSON.parse(companyInfo.value.welfare)
  }
}
// 获得company的分类名称
const getCategoryName = async (categoryId) => {
  const result = await http_company.getCategoryName(categoryId)
  if (result.code === 200) {
    categoryName.value = result.data
  }
}
// 获得在招聘职位数量
const getPostsInfo = async (companyId) => {
  const result = await http_posts.getByCompanyIdAndPage(
    companyId,
    postsPage.value,
    postsSize.value
  )
  if (result.code === 200) {
    postsInfoList.value = result.data.records
    for (let i = 0; i < postsInfoList.value.length; i++) {
      postsInfoList.value[i].postsKey = JSON.parse(
        postsInfoList.value[i].postsKey
      )
    }
    getPostsHotList()
    postsNumber.value = result.data.total
  }
}
// 获得公司BOSS人数
const getAuthNumber = async (companyId) => {
  const result = await http_company.getAuthNumber(companyId)
  if (result.code === 200) {
    authNumber.value = result.data
  }
}
// 切换子路由
const changeRoute = async (path) => {
  router.push({
    path,
    query: {
      companyId: route.query.companyId
    }
  })
}
// 获得热门的前三个职位
const getPostsHotList = () => {
  for (let i = 0; i < 3; i++) {
    if (postsInfoList.value[i] !== undefined) {
      postsHotList.value.push(postsInfoList.value[i])
    } else {
      break
    }
  }
}
// 切换收藏与取消收藏
const collectionFlag = ref(false)
const checkCollection = async () => {
  collectionFlag.value = !collectionFlag.value
  if (collectionFlag.value) {
    //收藏
    ElMessage({
      message: '收藏公司成功',
      type: 'success'
    })
    http_login.recordAddCompany(
      userStore.userInfo.userId,
      route.query.companyId
    )
  } else {
    ElMessage({
      message: '取消收藏公司成功',
      type: 'success'
    })
    http_login.recordDeleteCompany(
      userStore.userInfo.userId,
      route.query.companyId
    )
  }
}
// 判断公司是否被收藏
const RecordCheckCompany = async () => {
  const result = await http_login.recordCheckCompany(
    userStore.userInfo.userId,
    route.query.companyId
  )
  if (result.code === 200) {
    collectionFlag.value = result.data
  }
}
// vue3生命周期函数
onMounted(() => {
  window.scrollTo(0, 0)
  navbarStore.setFlag(false)
  if (route.query.companyId !== undefined) {
    getCompanyInfo(route.query.companyId)
  }
  setTimeout(() => {
    initMap()
  }, 200)
  RecordCheckCompany()
})

// 变量
const companyInfo = ref({}) //公司信息
const categoryName = ref('') //公司分类信息
const postsInfoList = ref([]) //公司职位数组
const postsNumber = ref(0) //公司职位数量
const postsHotList = ref([]) //热门职位
const authNumber = ref(0) //公司BOSS数量
const postsPage = ref(1) //职位分页查询当前页数
const postsSize = ref(10) //职位分页查询数量
const showFlag = ref(false) //是否展开公司简介
const companyImage = ref([]) //公司图片列表
const Longitude = ref(0) //经度
const Latitude = ref(0) //纬度

// 高德地图操作

const path = ref([])
const current_position = ref([])
function initMap() {
  window._AMapSecurityConfig = {
    securityJsCode: '50ee6098a3610602379bd8bc2bbbb299'
  }
  AMapLoader.load({
    key: '0ba96f5aa008a13c6a28e1bff6e5ab4c', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      const map = new AMap.Map('map', {
        //设置地图容器id
        zoom: 15, //初始化地图级别
        center: [Longitude.value, Latitude.value] //初始化地图中心点位置
      })
      // 添加插件
      AMap.plugin(
        [
          'AMap.ToolBar',
          'AMap.Scale',
          'AMap.HawkEye',
          'AMap.Geolocation',
          'AMap.MapType',
          'AMap.MouseTool'
        ],
        function () {
          //异步同时加载多个插件
          // 添加地图插件
          map.addControl(new AMap.ToolBar()) // 工具条控件;范围选择控件
          map.addControl(new AMap.Scale()) // 显示当前地图中心的比例尺
          map.addControl(new AMap.HawkEye()) // 显示缩略图
          map.addControl(new AMap.Geolocation()) // 定位当前位置
          map.addControl(new AMap.MapType()) // 实现默认图层与卫星图,实时交通图层之间切换

          // 以下是鼠标工具插件
          const mouseTool = new AMap.MouseTool(map)
          // mouseTool.rule();// 用户手动绘制折线图,测量距离
          mouseTool.measureArea() // 测量面积
        }
      )
      addMarker()
      // 单击
      map.on('click', (e) => {
        // lng ==> 经度值  lat => 维度值
        current_position.value = [e.lnglat.lng, e.lnglat.lat]
        path.value.push([e.lnglat.lng, e.lnglat.lat])
        addMarker()
        // addPolyLine();
      })
      function addMarker() {
        const marker = new AMap.Marker({
          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          position: [Longitude.value, Latitude.value],
          // 通过设置 offset 来添加偏移量
          offset: new AMap.Pixel(-20, -50)
        })
        marker.setMap(map)
      }
    })
    .catch((e) => {
      console.log(e)
    })
}

// 高德地图操作
</script>

<template>
  <div style="background-color: #dff1f4; height: 100%">
    <div class="top">
      <div style="display: flex; margin-left: 170px">
        <div
          style="
            width: 70px;
            height: 70px;
            border-radius: 15px;
            background-color: #fff;
            overflow: hidden;
          "
        >
          <img
            style="width: 100%; margin-top: 20px"
            :src="companyInfo.companyProfilePicture"
            alt=""
          />
        </div>
        <div style="color: #fff; margin-left: 25px">
          <div style="font-size: 28px; font-weight: 900; display: flex">
            <div>
              {{ companyInfo.name }}
            </div>
            <div>
              <span
                style="font-size: 24px; margin-left: 10px; color: #00d1d0"
                class="iconfont icon-renzheng"
              ></span>
            </div>
            <div
              @click="checkCollection"
              :class="[collectionFlag ? 'active' : '', 'collection']"
            >
              <div style="margin-left: 12px; line-height: 25px">
                <span
                  style="font-size: 18px"
                  class="iconfont icon-shoucang"
                ></span>
                <span style="font-size: 16px; margin-left: 5px">收藏</span>
              </div>
            </div>
          </div>
          <div style="font-size: 13px; margin-top: 10px">
            <span>{{ companyInfo.goPublic === 0 ? '未上市' : '已上市' }}</span>
            <span style="margin: 0 5px">·</span>
            <span>{{ companyInfo.numberPeople }}</span>
            <span style="margin: 0 5px">·</span>
            <span>{{ categoryName }}</span>
          </div>
        </div>
        <div style="position: absolute; right: 200px">
          <div style="font-size: 18px; color: #fff; margin-top: 5px">
            <span style="margin-left: 20px"
              ><b style="font-size: 34px; margin-right: 5px">{{
                postsNumber
              }}</b
              >在招职位</span
            >
            <span style="margin-left: 40px"
              ><b style="font-size: 34px; margin-right: 5px">{{ authNumber }}</b
              >位BOSS</span
            >
          </div>
          <div style="font-size: 16px; color: #00d1d0; margin-top: 20px">
            <span
              ><el-icon style="vertical-align: middle; margin-right: 5px"
                ><Document /></el-icon
              >完善在线简历</span
            >
            <span style="margin-left: 40px"
              ><el-icon style="vertical-align: middle; margin-right: 5px"
                ><UploadFilled /></el-icon
              >上传附件建立</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="navbar">
      <div
        @click="changeRoute('/companyInfo')"
        :class="['title', route.path === '/companyInfo' ? 'avtive' : '']"
      >
        公司简介
      </div>
      <div
        @click="changeRoute('/companyPosts')"
        :class="['title', route.path === '/companyPosts' ? 'avtive' : '']"
      >
        职位招聘({{ postsNumber }})
      </div>
    </div>
    <div class="introduction">
      <div class="hotPosts">
        <div style="position: relative">
          <span
            style="
              font-weight: 900;
              font-size: 18px;
              margin-left: 30px;
              line-height: 60px;
            "
            >热招职位</span
          >

          <span
            style="
              position: absolute;
              right: 40px;
              top: 25px;
              color: #00a6a7;
              font-size: 15px;
              cursor: pointer;
            "
            >查看全部{{ postsNumber }}个职位<el-icon
              style="vertical-align: middle"
              ><CaretRight /></el-icon
          ></span>
        </div>
        <div style="margin-left: 10px; display: flex">
          <div
            @click="
              router.push({
                path: '/postsInfo',
                query: { postsId: item.postsId }
              })
            "
            v-for="item in postsHotList"
            :key="item.postsId"
          >
            <el-popover placement="bottom" :width="500" trigger="hover">
              <template #reference>
                <div class="postsCard">
                  <div>
                    <span
                      style="
                        font-size: 18px;
                        margin-left: 15px;
                        margin-top: 15px;
                        display: inline-block;
                        width: 200px;
                      "
                      class="title"
                      >{{ item.name }}</span
                    >
                    <span
                      style="
                        font-size: 18px;
                        color: red;
                        font-weight: 900;
                        position: relative;
                        left: 0px;
                      "
                      >{{ item.salary }}</span
                    >
                  </div>
                  <div style="position: relative">
                    <span
                      style="
                        display: inline-block;
                        margin-top: 15px;
                        margin-left: 10px;
                      "
                    >
                      <el-tag
                        style="margin-right: 5px"
                        size="small"
                        class="ml-2"
                        type="info"
                        >{{ item.workExperience }}</el-tag
                      ><el-tag
                        style="margin-right: 5px"
                        size="small"
                        class="ml-2"
                        type="info"
                        v-if="item.academicQualifications == 0"
                        >无学历要求</el-tag
                      ><el-tag
                        style="margin-right: 5px"
                        size="small"
                        class="ml-2"
                        type="info"
                        v-if="item.academicQualifications == 1"
                        >高中</el-tag
                      ><el-tag
                        style="margin-right: 5px"
                        size="small"
                        class="ml-2"
                        type="info"
                        v-if="item.academicQualifications == 2"
                        >大专</el-tag
                      ><el-tag
                        style="margin-right: 5px"
                        size="small"
                        class="ml-2"
                        type="info"
                        v-if="item.academicQualifications == 3"
                        >本科</el-tag
                      ><el-tag
                        style="margin-right: 5px"
                        size="small"
                        class="ml-2"
                        type="info"
                        v-if="item.academicQualifications == 4"
                        >研究生</el-tag
                      >
                      <el-tag
                        style="margin-right: 5px"
                        size="small"
                        class="ml-2"
                        type="info"
                        v-if="item.academicQualifications == 4"
                        >博士</el-tag
                      ><el-tag
                        style="margin-right: 5px"
                        size="small"
                        class="ml-2"
                        type="info"
                        v-if="item.postsType == 0"
                        >社招</el-tag
                      ><el-tag
                        style="margin-right: 5px"
                        size="small"
                        class="ml-2"
                        type="info"
                        v-if="item.postsType == 1"
                        >应届校园招聘</el-tag
                      ><el-tag
                        style="margin-right: 5px"
                        size="small"
                        class="ml-2"
                        type="info"
                        v-if="item.postsType == 2"
                        >实习生招聘</el-tag
                      ></span
                    >
                    <span style="position: absolute; right: 15px; top: 15px">{{
                      item.city
                    }}</span>
                    <span
                      style="
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        color: #fff;
                        border-radius: 10px;
                        background-color: #00d1d0;
                        position: absolute;
                        right: 10px;
                        top: 10px;
                      "
                      class="connect"
                      >立即沟通</span
                    >
                  </div>
                </div>
              </template>
              <div>
                <div>
                  <span style="font-size: 16px; font-weight: 900"
                    >职位关键词</span
                  >
                  <div style="margin: 10px 0">
                    <el-tag
                      v-for="(item, index) in item.postsKey"
                      :key="index"
                      class="ml-2"
                      type="info"
                      style="margin-left: 10px"
                      >{{ item }}</el-tag
                    >
                  </div>
                </div>
                <div>
                  <span style="font-size: 16px; font-weight: 900"
                    >职位描述</span
                  >
                  <div style="font-size: 13px" v-html="item.description"></div>
                </div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 80%; margin: 0 auto; display: flex">
      <div class="company" v-if="route.path === '/companyInfo'">
        <div>
          <div :class="['incriduction', showFlag ? '' : 'hidden']">
            <div style="font-size: 18px; font-weight: 900">公司简介</div>
            <div
              v-html="companyInfo.description"
              style="line-height: 25px; font-size: 15px"
            ></div>
            <div style="height: 30px"></div>
            <div
              v-if="!showFlag"
              style="
                position: absolute;
                right: 10px;
                bottom: 15px;
                color: #00a6a7;
                cursor: pointer;
              "
              @click="showFlag = true"
            >
              展开 <el-icon><CaretBottom /></el-icon>
            </div>
            <div
              v-else
              style="
                position: absolute;
                right: 10px;
                bottom: 15px;
                color: #00a6a7;
                cursor: pointer;
              "
              @click="showFlag = false"
            >
              收起 <el-icon><CaretTop /></el-icon>
            </div>
          </div>
          <div class="image">
            <div style="font-size: 18px; font-weight: 900">公司相册</div>
            <div style="display: flex; flex-wrap: wrap">
              <div
                class="box"
                v-for="(item, index) in companyImage"
                :key="index"
              >
                <el-image
                  class="item"
                  :src="item"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="companyImage"
                  :initial-index="index"
                  fit="cover"
                />
              </div>
            </div>
          </div>
          <div style="margin-top: 20px">
            <div style="font-size: 18px; font-weight: 900">工商信息</div>
            <div
              style="
                width: 100%;
                margin: 0 auto;
                background-color: #f8f8f8;
                height: 200px;
                border-radius: 15px;
                margin-top: 15px;
              "
            ></div>
          </div>
          <div class="position">
            <div style="font-size: 18px; font-weight: 900">公司地址</div>
            <div class="info">
              <div class="location">
                <span style="color: #00d1d0" class="iconfont icon-map"></span>
                <span style="margin-left: 10px">{{
                  companyInfo.location
                }}</span>
              </div>
              <div id="map"></div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-else
        style="
          width: 72%;
          padding: 20px;
          background-color: #fff;
          border-radius: 15px;
          margin-bottom: 20px;
        "
      >
        <RouterView />
      </div>
      <div
        style="
          width: 23%;
          margin-left: 20px;
          background-color: #dff1f4;
          border-radius: 15px;
        "
      >
        <div class="item1">
          <div
            style="
              background-color: #f9f9f9;
              height: 50px;
              font-size: 16px;
              line-height: 50px;
              padding-left: 30px;
            "
          >
            工作时间及福利
          </div>
          <div style="color: #999; margin-left: 30px; margin-top: 10px">
            <span
              class="iconfont icon-shijian"
              style="vertical-align: middle"
            ></span>
            <span style="font-size: 13px; margin-left: 10px">{{
              companyInfo.workTime
            }}</span>
          </div>
          <div style="color: #999; margin-left: 30px; margin-top: 10px">
            <span
              class="iconfont icon-xiuxi"
              style="vertical-align: middle; font-size: 14px"
            ></span>
            <span style="font-size: 13px; margin-left: 10px">{{
              companyInfo.workType
            }}</span>
          </div>
          <div
            style="
              margin-top: 15px;
              display: flex;
              flex-wrap: wrap;
              padding-left: 10px;
            "
          >
            <div
              v-for="(item, index) in companyInfo.welfare"
              :key="index"
              style="
                background-color: #f8f8f8;
                width: 110px;
                height: 30px;
                border-radius: 5px;
                margin: 0 10px;
                text-align: center;
                line-height: 30px;
                color: #999;
                margin-top: 10px;
              "
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item1 {
  width: 100%;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  padding-bottom: 20px;
}
.company {
  width: 72%;
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
  margin-bottom: 20px;
  .image {
    .box {
      .item {
        width: 200px;
        height: 120px;
        border-radius: 15px;
        margin-left: 13px;
        margin-top: 15px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
      }
    }
  }
  .position {
    margin-top: 20px;
    .info {
      width: 100%;
      height: 300px;
      border: 1px solid #eee;
      border-radius: 20px;
      margin-top: 10px;
      overflow: hidden;
      .location {
        margin: 15px;
      }
      #map {
        width: 100%;
        height: 250px;
      }
    }
  }

  .incriduction {
    overflow: hidden;
    position: relative;
  }
  .hidden {
    overflow: hidden;
    height: 150px;
  }
}
.introduction {
  padding-bottom: 50px;
  .hotPosts {
    width: 80%;
    height: 180px;
    border-radius: 15px;
    background-color: #fff;
    margin: 0 auto;
    .postsCard {
      width: 360px;
      height: 90px;
      border: 1px solid #ddd;
      margin-left: 20px;
      border-radius: 15px;
      cursor: pointer;
      transition: background-color 0.3s ease; /* 添加过渡效果 */
      .title {
        transition: color 0.3s ease; /* 添加过渡效果 */
      }
      .connect {
        display: none;
      }
    }
    .postsCard:hover {
      background-color: #eee;
      .title {
        color: #00a6a7;
      }
      .connect {
        display: inline-block;
      }
    }
  }
}
.navbar {
  width: 80%;
  height: 50px;
  border-radius: 15px;
  background-color: #fff;
  margin: 20px auto;
  display: flex;
  font-size: 18px;
  line-height: 45px;
  .title {
    margin-left: 40px;
    cursor: pointer;
    transition: color 0.5s ease; /* 过渡效果 */
  }
  .title:hover {
    color: #00a6a7;
  }
  .avtive {
    border-bottom: 3px solid #00d1d0;
    color: #00a6a7;
  }
}
.top {
  width: 100%;
  height: 120px;
  background-color: #38566c;
  padding-top: 20px;
  position: relative;
  .collection {
    width: 90px;
    height: 35px;
    border-radius: 30px;
    margin-left: 15px;
    background-color: rgba($color: #fff, $alpha: 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease; /* 过渡效果 */
  }
  .collection:hover {
    background-color: rgba($color: #00d1d0, $alpha: 1);
  }
  .active {
    background-color: rgba($color: #00d1d0, $alpha: 1);
  }
}
</style>
